(function () {
    // 图表部分
    // 1. 初始化
    const chartWrapper = document.querySelector('.sale-count-wrapper .chart');
    const chart = echarts.init(chartWrapper);
    function setOption (unit) {
        // 2. 写配置项
        const option = {
            textStyle: {
                color: 'yellowgreen',
            },
            legend: {
                data: ['销售额', '预测值'],
                textStyle: {
                    color: 'yellowgreen'
                },
            },
            grid: {
                top: 40,
                bottom: 40,
                right: 0,
            },
            xAxis: {
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255, 0, 0, .3)',
                    },
                },
                axisTick: {
                    show: false,
                },
                type: 'category',
                data: sale[unit].map(item => item.month),
            },
            yAxis: {
                type: 'value',
                name: '单位/万',
                axisLabel: {
                    formatter (item) {
                        return Math.round(item / 10000);
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255, 0, 0, .3)',
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 0, 0, .3)',
                    },
                },
            },
            series: [
                {
                    name: '销售额',
                    data: sale[unit].map(item => item.saleCount),
                    type: 'line',
                    smooth: true,
                },
                {
                    name: '预测值',
                    data: sale[unit].map(item => item.predictCount),
                    type: 'line',
                    smooth: true,
                },
            ]
        };
        // 3. 导入配置项
        chart.setOption(option);
    }

    //#region
    setOption('year');

    // 年季月周
    // 计数索引
    let currentIndex = 1;
    // ['year', 'season', 'month', 'week']
    const keys = Object.keys(sale);
    // len组数据
    const len = keys.length;

    let timer;

    function start () {
        timer = setInterval(() => {
            const i = currentIndex % len;
            // 切换高亮项
            $('.sale-count-wrapper>button').eq(i).addClass('active');
            $('.sale-count-wrapper>button').eq(i).siblings().removeClass('active');
            setOption(keys[i]);
            currentIndex++;
        }, 1000);
    }

    // 初始动画
    start();

    // 鼠标移入暂停动画
    $('.sale-count-wrapper').on('mouseenter', () => {
        clearInterval(timer);
    });

    // 鼠标移出回复动画
    $('.sale-count-wrapper').on('mouseleave', start);

    //#endregion

    // 点击按钮跳到相应数据
    $('.sale-count-wrapper>button').on('click', function () {
        const i = $(this).index() - 1;
        currentIndex = i;
        $('.sale-count-wrapper>button').eq(i).addClass('active');
        $('.sale-count-wrapper>button').eq(i).siblings().removeClass('active');
        setOption(keys[i]);
    });

})();